<template>
  <div class="pc-view-block">
    <div class="head flex-between">
      <h1>{{$t('home.blockTitle')}}</h1>
    </div>
    <div class="block-area">
      <div class="block-item flex-between" v-for="(item,index) in blockList" :key="index">
        <router-link
          :to="{path:'/blockdetail',query:{height:item.height}}"
          class="height-box"
        >{{item.height}}</router-link>
        <div class="middle flex-left-between-stright">
          <p>
            <span>{{$t('home.txCount')}}</span>
          </p>
          <p>
            <span class="light txcount">{{item.txs.length}}</span>
          </p>
        </div>
        <div class="reward flex-left-between-stright">
          <p>{{$t('home.time')}}</p>
          <count class="count-down grey" :time="item.blockTime"></count>
          <!-- <p class="grey">挖矿收益</p>
          <p>
            {{item.height>2269999? 8:30}} BTY
            <span
              class="grey"
            >{{item.height>2269999?'（矿工5 + 发展基金3）':'（矿工18 + 发展基金12）'}}</span>
          </p>-->
        </div>
      </div>
    </div>
    <div class="footer">
      <router-link to="/block" class="link">{{$t('home.viewAll')}}</router-link>
    </div>
  </div>
</template>
<script>
import blockBase from "@/mixins/Home/blockList.js";
import Count from "@/components/Count.vue";
export default {
  mixins: [blockBase],
  components: {
    Count
  }
};
</script>

<style lang="scss" scoped>
.pc-view-block {
  width: 585px;
  display: inline-block;
  background: $white;
  box-shadow: 4px 5px 17px 0px rgba(245, 245, 245, 0.8);
  .head {
    height: 45px;
    padding-left: 20px;
    border-bottom: 1px solid $border;
    h1 {
      font-size: 15px;
      font-family: PingFangSC-Medium;
      font-weight: 600;
      color: $black;
      line-height: 22px;
    }
  }
  .footer {
    height: 54px;
    padding: 12px;
    .link {
      display: inline-block;
      width: 100%;
      height: 100%;
      line-height: 30px;
      text-align: center;
      // color: $orange;
      color: #3498db;
      background: rgba(52, 152, 219, 0.1);
      border-radius: 2px;
      transition: 0.3s;
    }
    .link:hover {
      color: #fff;
      background: #3498db;
      box-shadow: 0 0 20px rgba(52, 152, 219, 0.2);
    }
  }
  .block-area {
    // margin-top: 25px;
    height: 542px;
    width: 100%;
    .block-item {
      width: 100%;
      height: 90px;
      padding: 20px 40px 20px 20px;
      border-bottom: 1px solid $border;
      color: $black;
      .height-box {
        height: 51px;
        min-width: 75px;
        padding: 0 10px;
        line-height: 51px;
        text-align: center;
        color: $white;
        font-size: 14px;
        background: $blue;
        border-radius: 2px;
        cursor: pointer;
        transition: 0.3s;
      }
      .height-box:hover {
        background: $hover_blue;
      }
      .middle {
        min-width: 4em;
        height: 100%;
        margin-left: 20px;
        text-align: center;
        .hash {
          display: inline-block;
          cursor: pointer;
          min-width: 130px;
        }
        .txcount {
          display: inline-block;
          min-width: 4em;
          text-align: center;
        }
      }
      .grey {
        color: $grey;
      }
      .reward {
        width: 130px;
        height: 100%;
        text-align: center;
      }
    }
    // .block-item:last-child {
    //   border: none;
    // }
  }
}
</style>
